<template>
  <el-container>
    <el-main>
      <el-form ref="sysReportForm" :model="form" :rules="rules" label-width="80px">
        <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
          <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">修改报表</span>
        </div>
        <el-form-item label="报表名称" prop="name">
          <el-col :span="6">
            <el-input v-model="form.name" />
          </el-col>
        </el-form-item>
        <el-form-item label="报表分组" prop="reportCategoryId">
          <el-col :span="6">
            <el-input v-model="reportCategory" suffix-icon="el-icon-arrow-down" @focus="dialogShow" />
          </el-col>
        </el-form-item>
        <el-form-item label="简介">
          <el-col :span="12">
            <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 1, maxRows: 3}" />
          </el-col>
        </el-form-item>
        <el-form-item label="数据源SQL" prop="sql">
          <el-col :span="12">
            <el-input
              v-model="form.sql"
              type="textarea"
              placeholder="请输入内容"
              :autosize="{ minRows: 10, maxRows: 30}"
              @change="sqlChange"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="参数说明">
          <el-col :span="18">
            <el-table
              :data="form.params"
              stripe
              style="width: 100%"
            >
              <el-table-column
                prop="paramName"
                label="参数名"
                width="180"
              />
              <el-table-column
                label="中文名"
                width="180"
              >
                <template slot-scope="scope">
                  <el-form-item :prop="'params.' + scope.$index + '.title'" :rules="rules.title">
                    <el-input
                      v-model="scope.row.title"
                      placeholder="请输入内容"
                      clearable
                    />
                  </el-form-item>

                </template>
              </el-table-column>
              <el-table-column
                label="数据源"
              >
                <template slot-scope="scope">
                  <el-form-item :prop="'params.' + scope.$index + '.dataSource'" :rules="rules.dataSource">
                    <el-select v-model="scope.row.dataSource" placeholder="请选择">
                      <el-option
                        v-for="item in dataSource"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>

                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-form-item>
        <el-form-item label="报表模板" prop="template">
          <file-upload @uploadFn="uploadFn" v-model="form.template" :click-text="'上传模板'" style="width: 300px;display: inline-block;margin-left: 10px" />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-col :span="12">
            <template>
              <el-switch
                v-model="switchValue"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="setSwitchValue"
              />
            </template>

          </el-col>
        </el-form-item>
      </el-form>
      <el-button v-permission="['sysReport.edit']" class="el-button—class" type="primary" :loading="clicked" @click="saveMchCourse">&nbsp&nbsp保 存&nbsp&nbsp</el-button>
      <category-dialog ref="categoryDialog" request="sysReportCategory" @confirm="categoryDialogConfirm" />
    </el-main>
  </el-container>
</template>

<script>
    import { update, find, findCategory } from '@/api/sysReport'
    import { EventBus } from '@/api/eventBus'
    import CategoryDialog from '@/components/CategoryDialog'
    import fileUpload from '@/components/Upload/fileUpload'
    import permission from '@/directive/permission/index.js' // 权限判断指令

export default {
  name: 'edit',
  components: {
    CategoryDialog, fileUpload
  },
  directives: { permission },
  data() {
    return {
      id: '',
      paramsData: [ // 参数数据
      ],
      dataSource: [ // 数据源
        { value: 0, label: '商户'},
        { value: 1, label: '时间' },
        { value: 2, label: '部门' },
        { value: 3, label: '仓库' },
        { value: 4, label: '员工' },
        { value: 5, label: '客户' },
        { value: 6, label: '供应商' },
        { value: 7, label: '品牌' },
        { value: 8, label: '分类' },
        { value: 9, label: '商品' },
        { value: 10, label: '单位' }
      ],
      clicked: false, // 按钮防双击
      reportCategory: '',
      switchValue: true,
      form: {
        name: '',
        reportCategoryId: '', // 分类
        remark: '',
        sql: '',
        params: [], // 参数数据
        template: '',
        status: '1'
      },
      sysReportForm: [],
      subscribe: false,
      tagData: [],
      tagForm: [],
      upload: true,
      rules: {
        name: [
          { required: true, message: '请输入报表名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        reportCategoryId: [
          { required: true, message: '请选择报表分组' },
          { min: 2, max: 40, message: '长度在 2 到 40 个字符', trigger: 'blur' }
        ],
        sql: [
          { required: true, message: '请输入数据源', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入中文名', trigger: 'blur' }
        ],
        dataSource: [
          { required: true, message: '请输入数据源', trigger: 'blur' }
        ],
        template: [
          { required: true, message: '请上传报表模板', trigger: 'blur' }
        ]
      }
    }
  },
  watch:{ // 路由地址不变的情况下,如果id变化则重新获取数据
    $route (newVal, oldVal) {
        console.log(newVal);
      if (newVal.name=='sysReport-edit' && newVal.query.id!=this.id) {
        this.getData()
      }
    }
  },
  //数据初始化完毕自动调用方法
  created(){
    this.getData()
  },
  methods: {
    getData(){
      this.id = this.$route.query.id
      find(this.id).then(response => {
        console.log(response)
        findCategory(response.data.sysReport.reportCategoryId).then(response => { // 获取分类
          this.reportCategory = response.data.sysReportCategory.name
        })
        this.form.id = this.$route.query.id
        this.form = response.data.sysReport
        let tempParams = response.data.sysReport.params
        this.switchValue = Boolean(response.data.sysReport.status)
        tempParams = JSON.parse(tempParams)
        this.form.params = tempParams
        console.log('json',this.form.params)
      }).catch(error => {
      })
    },
    setSwitchValue(item) {
      this.form.status = Number(item)
    },
    dialogShow() {
      console.log('点击了')
      this.$refs.categoryDialog.show()
    },
    categoryDialogConfirm(val) {
      console.log(val)
      // this.form.reportCategoryId = val.id;
      this.form.reportCategoryId = val.id
      this.reportCategory = val.name
    },
    uploadFn (data) {
      this.upload = data
    },
    saveMchCourse() {
      const _this = this
      this.$refs.sysReportForm.validate((valid) => {
        if (valid && this.upload === true) { // 校验表单
          _this.clicked = true
          let tempParams = JSON.stringify(this.form.params)  // 定义一个变量保存表单的参数数据,然后转成字符串
          var tempArr = { // 将转成字符串的参数数据保存到新数组里,不然会报错
            id: _this.form.id,
            name: _this.form.name,
            reportCategoryId: _this.form.reportCategoryId, // 分类
            remark: _this.form.remark,
            sql: _this.form.sql,
            params: tempParams, // 参数数据
            template: _this.form.template,
            status: _this.form.status
          }
          update(tempArr).then(response => {
            console.log(response)
            _this.clicked = false
            if (response.type == 'success') {
              EventBus.$emit('sysReport-add', response.data)
              _this.$store.dispatch('tagsView/delAllViews', _this.$route).then(({ visitedViews }) => {
                _this.$router.push({
                  path: '/sysReport/list'
                })
              })// 关闭当前tab回到列表
            } else {
              _this.$message({
                message: response.content,
                offset: 120,
                center: true
              })
            }
          }).catch(error => {
            _this.clicked = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    sqlChange(value) {
      console.log(value)
      // let reg = /(?<=:)\w+/g // 查找:开头但不包含:的单词,并且全局查找
      /*
      查找:之后但不包含:同时以空格结尾的字符 但 不包含空格 的 任意长度字符串 |
       查找:之后但不包含:同时以)结尾的字符 但 不包含) 的 任意长度字符串 |
        查找:之后但不包含:同时已换行结尾 但 不包含换行 的 任意长度字符串 |
         查找:之后但不包含:同时后面没有任何字符  的 任意长度字符串, 并且全局查找
      */
      // const reg = /(?<=:).*?(?=\ )|(?<=:).*?(?=\))|(?<=:).*?(?=\s)|(?<=:).*?\w+$/g
      const reg = /(?<=\${).*?(?=\})/g
      const res = value.match(reg) // 进行查找并提取
      if (res === null) { // 如果没有数据则直接清空数组
        this.form.params = []
        return
      }
      let tempArr = res.map((item, index) => { // 将数据映射到数组里
        return { paramName: item }
      })
      if (this.form.params.length === 0) { // 如果列表里现在没数据,就直接添加
        for (let i = 0; i < tempArr.length; i++) { // 去重
          for (let k = i + 1; k < tempArr.length; k++) {
            if (tempArr[i].paramName === tempArr[k].paramName) {
              tempArr.splice(k, 1)
              k--
            }
          }
        }
        this.form.params = tempArr
      } else {
        /* 如果截取到的数据数组里有,列表没有,则把多出来的数据添加到列表里*/
        let isSave // 用于判断是否保存到列表里
        for (let i = 0; i < tempArr.length; i++) { // 循环数组里的数据
          for (let k = 0; k < this.form.params.length; k++) { // 循环列表中的所有数据
            if (tempArr[i].paramName === this.form.params[k].paramName) { // 对比数组里的数据跟列表中的数据是否重复
              console.log('重复了', tempArr[i])
              isSave = false // 不保存
              break // 只要有一个重复了,直接跳过本轮循环
            } else {
              isSave = true // 要保存
            }
          }
          if (isSave) { // 一轮循环过后没找到重复数据就保存到列表里
            this.form.params.splice(i, 0, tempArr[i]) // 从索引取到的位置开始插入这个没有的数据
          }
        }
        /* 如果截取到的数据数组里没有,但列表有,则删除列表里的数据 */
        let isRemove // 用于判断是否有删除的数据
        for (let i = 0; i < this.form.params.length; i++) { // 循环列表中的所有数据
          for (let k = 0; k < tempArr.length; k++) { // 循环数组里的数据
            if (tempArr[k].paramName === this.form.params[i].paramName) { // 对比是否都有相同数据
              isRemove = false // 不删除
              break // 有相同数据就跳过本轮循环
            } else {
              isRemove = true // 删除
            }
          }
          if (isRemove) {
            this.form.params.splice(i, 1)
            i--
          }
        }
      }
      console.log(this.form)
    }
  }
}
</script>

<style scoped>

</style>
